<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		:root {
			--TextColor: #55007f;
		}

		body {
			margin: 0;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #222;
		}

		div {
			position: relative;
			text-align: center;
			font-size: 60px;
			background-color: #000;
			background-clip: text;
			-webkit-background-clip: text;
			color: transparent;
		}

		div::after {
			content: attr(data-susu); /* 伪元素通过attr()获取标签自定义属性的值 */  
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-image:
				linear-gradient(120deg, transparent 0%, transparent 4vmin, var(--TextColor) 8vmin, transparent 12vmin, transparent 16vmin, var(--TextColor) 20vmin, transparent 24vmin, transparent 28vmin, var(--TextColor) 32vmin, transparent 36vmin, transparent 100%);
			background-clip: text;
			-webkit-background-clip: text;
			z-index: 1;
			background-size: 200% 100%;
			background-repeat: no-repeat;
			animation: shine 3s infinite linear;
		}

		@keyframes shine {
			0% {
				background-position: 100% 0;
			}

			100% {
				background-position: -190% 0;
			}
		}
	</style>
	<body>
		<div data-susu="苏苏就是小苏苏">苏苏就是小苏苏</div>
	</body>
</html>
